import React, { Component } from 'react'
import *  as echarts from "echarts"
export class TabCont extends Component {
    componentDidMount(){
    // console.log("echarts",echarts)
    this.myChart =echarts.init(document.querySelector("#chart"))
}
    componentDidUpdate(){
        const {children}=this.props
        let month =children.map((v)=>v.month)
        let num =children.map((v)=>v.num)
    var option = {
        title: {
          text: '我的\ntab切换'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: month
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: num
          }
        ]
      };
      this.myChart.setOption(option)
    }
  render() {
      const {children} =this.props
    return (
        <div>
      <div id="chart"  style={{width:400,height:400}} ></div>
      <ul>{
          children.length ?children.map((item,index)=>{
              return <li key={item.id}>
                  <b>{item.month}月</b>
                  <span>{item.title}</span>
                  <span>{item.num}</span>
              </li>
          }):'暂无数据'
      }
      </ul>
      </div>
    )
  }
}

export default TabCont